window.addEventListener('load', function () { 
    var preview = document.querySelector('.preview_img'); 
    var mask = document.querySelector('.mask');
    var big = document.querySelector('.big');
    preview.addEventListener('mouseover', function () {
        mask.style.display = 'block';
        big.style.display = 'block';
    });
    preview.addEventListener('mouseout', function () {
        mask.style.display = 'none';
        big.style.display = 'none';
    });
    // 鼠标移动，鼠标在盒子里的位置给遮罩层
    preview.addEventListener('mousemove', function (e) { 
        var x = e.pageX - preview.offsetLeft;
        var y = e.pageY - preview.offsetTop;
        // 遮罩层的距离
        var maskX = x -mask.offsetWidth/2;
        var maskY = y - mask.offsetHeight / 2;
        var maskMax = preview.offsetWidth - mask.offsetWidth;
        // console.log(maskMax);
        if (maskX <= 0) {
            maskX = 0;
        } else if(maskX>=maskMax){ 
            maskX = maskMax;
        }
        if (maskY <= 0) {
            maskY = 0;
        } else if(maskY>=maskMax){ 
            maskY = maskMax;
        };
        mask.style.left = maskX + 'px';
        mask.style.top = maskY + 'px';

        // 图片的移动距离 = maskX * 图片最大移动距离 / maskMax;
        var bigImg = document.querySelector('.bigImg');
        var bigImgMax = bigImg.offsetWidth - big.offsetWidth;
        var bigImgX = maskX * bigImgMax / maskMax;
        var bigImgY = maskY * bigImgMax / maskMax;
        bigImg.style.left = -bigImgX + 'px';
        bigImg.style.top = -bigImgY + 'px';
    })
})